<template>
    <div class="product">
        <div class="wrapper">
            <!-- 添加开始 -->
                <el-button size="mini" style="background-color:#2cb5ac" type="primary" >添加</el-button>
            <!-- 添加结束-->
            <!-- 输入框开始 -->
                <div width="179px" height="20px">
                  <el-input size="small"  placeholder="请输入名称" v-model="list.name" clearable></el-input>

                </div>
            <!-- 输入框结束 -->
                <!-- 单选框开始 -->
                <div width="179px" height="28px">
                    <el-select  size="small" v-model="value1" clearable placeholder="请选择状态">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                    </el-select>  
                </div>
                <div width="179px" height="28px">
                    <el-select size="small" v-model="value2" clearable placeholder="请选择栏目">
                    <el-option
                    v-for="item in pros"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                    </el-select>  
                </div>
                <!-- 单选框结束 -->
               <!-- 查询按钮开始 -->
                <el-button size="mini" style="background-color:#2cb5ac" type="success" @click="chaHandler">查询</el-button>
               <!-- 查询按钮结束-->
        </div>
        <!-- 表格开始 -->
   <div class="table">
        <el-table :data="products" style="width: 100%">
      <el-table-column  prop="id"  label="产品编号"  width="180"></el-table-column>
      <el-table-column  prop="name"  label="名称"  width="180"></el-table-column>
       <el-table-column label="图片">
      <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
           <img width="90px" :src="scope.row.photo" alt="">
            <div slot="reference" class="name-wrapper">
               <img width="30px" :src="scope.row.photo" alt="">
            </div>
          </el-popover>
      </template>
    </el-table-column>
      <el-table-column  prop="price"  label="价格"></el-table-column>
       <el-table-column prop="status" label="状态"></el-table-column>
       <el-table-column  prop="category.name" label="所属栏目"></el-table-column>
       <el-table-column label="操作"  align="center">
                        <template slot-scope="scope">
                            <el-button @click="editHandler(scope.row)" size="mini" type="success ">编辑</el-button>
                            <el-button @click="deleteHandler(scope.row.id)" size="mini" type="danger">下架</el-button>
                        </template>
         </el-table-column>
    </el-table>
   </div>
        <!-- 表格结束 -->
         <!-- 分页开始 -->
       <div class="paginnation">
            <el-pagination
            layout="prev, pager, next"
            :page-size = 'list.pageSize'
            :total="total"
            @current-change='changeHandler'>
        </el-pagination>
    </div>
      <!-- 分页结束 -->
    </div>
</template>
<script> 
import {mapState,mapActions} from 'vuex'
export default {
    data(){
        return{
        options: [
            {
              value: '选项一',
          label: '下架'
        }, 
        {  value: '选项二',
          label: '正常'
        }, 
        ],
         value1:[],
         value2:[],
        list:{
             page:1,
             pageSize:10,
         },
         pros:[
             {
          value: '选项1',
          label: '家庭保洁'
        }, 
        {
          value: '选项2',
          label: '衣物护理'
        }, 
        {
          value: '选项3',
          label: '母婴陪护'
        }, 
        {
          value: '选项4',
          label: '家居养护'
        }, 
        {
          value: '选项5',
          label: '家电清洗'
        }, 
        {
          value: '选项6',
          label: '环境整治'
        }, 
         ]
        }
    },
    computed:{
        ...mapState('product',['products','total'])
    },
    methods:{
        ...mapActions('product',['findAllProduct']),
         changeHandler(page){
            this.list.page = page,
           this.findAllProduct(this.list)
        },
        chaHandler(){
            alert(999)
        this.findAllProduct(this.list)
        },
    },
    created(){
        this.findAllProduct(this.list)
    }
}
</script>
<style scoped lang="scss">
.wrapper{
    width: 750px;
    height: 30px;
    display: flex;
    justify-content:space-between;
    text-align: center;
    font-size: 12px;
}
.table{
    margin-top: 20px;
}
.paginnation{
    float: right;
}
</style>